import React from 'react';
import { Cascader } from 'antd';
import { connect } from 'umi';
import { groupBy } from 'lodash';
import { TRMessage } from '@/components';
import styles from './index.less';
import Windy from './Windy'; // Windy
import Zhongke from './Zhongke'; // 中科
import { queryPower } from './services';

// 'XZ',
const tabs = ['ZKTJ', 'Windy'];

const WeatherForecast = (props) => {
  const [tab, setTab] = React.useState(tabs[0]);
  const [powers, setPowers] = React.useState([]);
  const [station, setStation] = React.useState(null);
  // const [stationWidth, setStationWidth] = React.useState(200);

  React.useEffect(() => {
    fetchPowers();
  }, []);

  const fetchPowers = async () => {
    const res = await queryPower(props.menuCode);
    const resData = (res?.data || []).map((x) => ({
      ...x,
      label: x.stationName,
      value: x.stationId,
    }));
    let _powers = [];
    const regionData = groupBy(resData, 'provinceId');
    for (const key in regionData) {
      const groups = groupBy(regionData[key], 'groupId');
      const _regionTemp = {
        label: regionData[key]?.[0]?.provinceName,
        value: key,
        children: [],
      };
      for (const groupId in groups) {
        const stations = groups[groupId].map((x) => ({
          ...x,
          lable: x.stationName,
          value: x.stationId,
        }));
        const _groupTemp = {
          label: stations?.[0]?.groupName,
          value: groupId,
          children: stations,
        };
        _regionTemp.children.push(_groupTemp);
      }
      _powers.push(_regionTemp);
    }
    setPowers(_powers);
  };

  const filter = (inputValue, path) => {
    return path.some((option) => option.label.indexOf(inputValue) > -1);
  };

  return (
    <div className={styles.container}>
      <div className={styles.head}>
        <div className={styles.station}>
          <Cascader
            options={powers}
            placeholder={'请选择场站'}
            showSearch={{ filter }}
            allowClear={false}
            // width: stationWidth,
            size="large"
            style={{ width: 150, background: '#434749' }}
            displayRender={(labs) => labs[labs.length - 1]}
            onChange={(v, opts) => {
              // const pickerLabel = opts.map((x) => x.label).join('/');
              // setStationWidth(pickerLabel.length * 14 + 11 + 24 + 12);
              const _st = opts?.[2] || null;
              setStation(_st);
              if (_st) {
                navigator.clipboard.writeText(`${_st.longitude},${_st.latitude}`);
                TRMessage.info(`${_st.stationName}的经纬度已复制到粘贴板`);
              }
            }}
          />
        </div>
        {/*<div className={styles.mask}/>*/}
        <div className={styles.tabs}>
          {tabs.map((t) => (
            <div
              key={t}
              className={`${styles.tab} ${t === tab ? styles.active : ''}`}
              onClick={() => setTab(t)}
            >
              {t}
            </div>
          ))}
        </div>
      </div>
      <div className={styles.main}>
        {tab === 'ZKTJ' && <Zhongke />}
        {tab === 'Windy' && <Windy station={station} />}
      </div>
    </div>
  );
};

export default connect(({ global }) => ({
  menuCode: global.configure.menuCode,
}))(WeatherForecast);
